<template>
  <div>
    <van-sticky>
      <div class="detailbox_item mt0" style="height: 111px;box-shadow: #666 50px 50px 50px;" >
        <div class="detailbox_item_title">待办任务</div>
        <div class="task" v-if="!!relevanceList&&relevanceList.length>0">
          <van-radio-group v-model="radioModel" class="taskList">
            <div v-for="(item, index) in relevanceList">
              <div class="item" @click="radioModel = index;taskInfo = item">
                <div>
                  <van-radio :name="index" class="name">
                    {{ item.taskTypeName == '续保到期提醒' && item.renewalNode ? item.taskTypeName + '-' + item.renewalNode : item.taskTypeName }}
                  </van-radio>
                </div>
                <div class="time">{{ item.shuldFollowTime|formatDate('yyyy-MM-dd') }}</div>
              </div>
            </div>
          </van-radio-group>
        </div>
        <div v-else class="no_icon" style="padding: unset">
          <img class="no_icon_img" src="@/assets/images/no_icon.png" style="width: 55px"/>
          <div class="no_icon_txt">暂无待办任务</div>
        </div>
      </div>
    </van-sticky>

    <div ref="contentData" class="registerDetail">
      <van-row class="rowbox">
        <van-col span="9">
          <div class="con_box">
            <div class="detailbox_item">
<!--              <div class="detailbox_item_title">车辆信息概览</div>-->
              <div style="display: flex;justify-content: space-between">
                <div class="detailbox_item_title">车辆信息概览</div>
                <div style="color: #3979FF;font-size: 16px" @click="showUpdateMaintain(carInfo)"> <van-icon name="edit" color="#3979FF"/> 保养记录登记</div>
              </div>
              <div class="carInfo_content">
                <div class="carInfo_item">
                  <div class="item_label">维修中心：</div>
                  <div class="item_val">{{ carInfo.fixCenterName ? carInfo.fixCenterName : '- -' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">服务顾问：</div>
                  <div class="item_val">{{ carInfo.serverPsnName ? carInfo.serverPsnName : '- -' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">车牌号：</div>
                  <div class="item_val">{{ carInfo.carNo ? carInfo.carNo : '- -' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">车架号：</div>
                  <div class="item_val">{{ carInfo.vinCode ? carInfo.vinCode : '- -' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">车型：</div>
                  <div class="item_val">{{ carInfo.carModelNameName ? carInfo.carModelNameName : '- -' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">上次进场时间：</div>
                  <div class="item_val">{{ carInfo.lastIn ? carInfo.lastIn : ' - -' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">当前里程数：</div>
                  <div class="item_val">{{ carInfo.carMile ? carInfo.carMile + '(km)' : '- - ' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">会员等级：</div>
                  <div class="item_val">{{ carInfo.currentGradeName ? carInfo.currentGradeName : '- - ' }}</div>
                </div>

                <div class="carInfo_item">
                  <div class="item_label">客户VIP等级：</div>
                  <div class="item_val">{{ carInfoKhyy.storeCusLevel ? carInfoKhyy.storeCusLevel : '- - ' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">等级设定理由：</div>
                  <div class="item_val" :style="carInfoKhyy.setReason ? { width: '65%', wordBreak: 'break-word' }: ''">
                    {{ carInfoKhyy.setReason ? carInfoKhyy.setReason : '- - ' }}</div>
                </div>

                <div class="carInfo_item">
                  <div class="item_label">所属客户管家：</div>
                  <div class="item_val">{{ carInfoKhyy.khgj ? carInfoKhyy.khgj : '- - ' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">车辆状态：</div>
                  <div class="item_val">{{ carInfoKhyy.clzt ? carInfoKhyy.clzt : '- - ' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">保险状态：</div>
                  <div class="item_val">{{ carInfoKhyy.bxzt ? carInfoKhyy.bxzt : '- - ' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">上次接待SA：</div>
                  <div class="item_val">{{ carInfoKhyy.lastStoreSa ? carInfoKhyy.lastStoreSa : '- - ' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">上次保险出单人：</div>
                  <div class="item_val">{{ carInfoKhyy.insDjr ? carInfoKhyy.insDjr : '- - ' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">上次保险出单时间：</div>
                  <div class="item_val">{{ carInfoKhyy.insCdrq ? carInfoKhyy.insCdrq : '- - ' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">上次保险出单类型：</div>
                  <div class="item_val">{{ carInfoKhyy.insLx ? carInfoKhyy.insLx : '- - ' }}</div>
                </div>
              </div>
            </div>
          </div>

          <div class="con_box">
            <div class="detailbox_item">
              <div class="detailbox_item_title">车辆保修保险信息</div>
              <div class="carInfo_content h100">
                <div class="carInfo_item">
                  <div class="item_label">保险类型：</div>
                  <div class="item_val">{{ carInfo.inusuranceType ? carInfo.inusuranceType : '- -' }}</div>
                </div>

                <div class="carInfo_item">
                  <div class="item_label">保险公司：</div>
                  <div class="item_val">{{ carInfo.inusuranceComName ? carInfo.inusuranceComName : '- -' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">保险到期日：</div>
                  <div class="item_val">{{ carInfo.inusuranceDate ? carInfo.inusuranceDate : '- -' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">原厂保修到期日：</div>
                  <div class="item_val">{{ carAssociatedInfo.fixEndDate ? carAssociatedInfo.fixEndDate : '- -' }}</div>
                </div>
                <div class="carInfo_item">
                  <div class="item_label">自营延保到期日：</div>
                  <div class="item_val">{{ carAssociatedInfo.zyEndDate ? carAssociatedInfo.zyEndDate : '- -' }}</div>
                </div>
              </div>

              <div class="detailbox_item_title">非车险种记录</div>
              <div class="repair_content h395">
                <div v-if="carAssociatedInfo.notCarBill && carAssociatedInfo.notCarBill.length != 0" class="repair_list">
                  <div v-for="(item, index) in carAssociatedInfo.notCarBill" :key="index" class="repair_item">
                    <!-- <div class="repair_list" v-if="repairList && repairList.length != 0">
                    <div class="repair_item" v-for="(item, index) in repairList" :key="index">-->
                    <div class="item_bottom">
                      <div class="item_box">
                        <div class="item_lt">
                          <div class="item_lable">投保险种：</div>
                          <div class="item_val">{{ item.insName ? item.insName : '- -' }}</div>
                        </div>
                        <div class="item_rt2">
                          <div class="item_lable">保险公司：</div>
                          <div class="item_val">{{ item.insCmpName ? item.insCmpName : '- -' }}</div>
                        </div>
                      </div>
                      <div class="item_box">
                        <div class="item_lt">
                          <div class="item_lable">起保日期：</div>
                          <div class="item_val">{{ item.beginDate ? item.beginDate : '- -' }}</div>
                        </div>
                        <div class="item_rt2">
                          <div class="item_lable">终保日期：</div>
                          <div class="item_val">{{ item.endDate ? item.endDate : '- -' }}</div>
                        </div>
                      </div>
                      <div class="item_box">
                        <div class="item_lt">
                          <div class="item_lable">被保险人：</div>
                          <div class="item_val">{{ item.insPsn ? item.insPsn : '- -' }}</div>
                        </div>
                        <div class="item_rt2">
                          <div class="item_lable">被保险人电话：</div>
                          <div class="item_val">{{ item.insPhone ? item.insPhone : '- -' }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="no_icon">
                  <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                  <div class="no_icon_txt">暂无内容</div>
                </div>
              </div>
            </div>
          </div>
          <div class="con_box">
            <div class="detailbox_item">
              <div class="detailbox_item_title">卡券信息</div>
              <div class="card_content" style="max-height: 188px;overflow: auto">
                <div v-if="cardList && cardList.length != 0" class="card_list">
                  <div v-for="(item, index) in cardList" :key="index" class="card_item">
                    <div class="item_lt">¥{{ item.amount }}</div>
                    <div class="item_rt">
                      <div class="item_name">{{ item.couponsName }}</div>
                      <div class="item_number">券号：{{ item.ticketNumber }}</div>
                      <div class="item_time">
                        <div class="txt1">{{ item.usedDate|formatDate('yyyy-MM-dd') }}领用</div>
                        <div>{{ item.expireDate|formatDate('yyyy-MM-dd') }}到期</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="no_icon">
                  <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                  <div class="no_icon_txt">暂无内容</div>
                </div>
              </div>
            </div>
          </div>

          <div class="con_box">
            <div class="detailbox_item">
              <div class="detailbox_item_title">车辆维修履历</div>
              <!-- <div class="repair_content h600"> -->

              <!-- </div> -->
              <van-pull-refresh v-model="refreshing" class="repair_content repair_height" @refresh="onRefresh">
                <van-list
                  v-if="repairList && repairList.length != 0"
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="getRepairworkorder"
                >
                  <div class="repair_list">
                    <div v-for="(item, index) in repairList" :key="index" class="repair_item">
                      <div class="item_top">
                        <div class="item_num">
                          <img class="item_icon" src="@/assets/images/repair_icon.png" />
                          <div class="item_name">工单编号：{{ item.repairNumber }}</div>
                        </div>
                        <div class="item_btn" @click="goRepairDetail(item)">详情</div>
                      </div>
                      <div class="item_bottom">
                        <div class="item_box">
                          <div class="item_lt">
                            <div class="item_lable">工单类型：</div>
                            <div class="item_val">{{ item.repairWorkBillType ? item.repairWorkBillType : '- -' }}</div>
                          </div>
                          <div class="item_rt">
                            <div class="item_lable">服务顾问：</div>
                            <div class="item_val">{{ item.serverPersonName ? item.serverPersonName : '- -' }}</div>
                          </div>
                        </div>
                        <div class="item_box">
                          <div class="item_lt">
                            <div class="item_lable">进场时间：</div>
                            <div class="item_val">{{ item.repairBizDate ? item.repairBizDate : '- -' }}</div>
                          </div>
                          <div class="item_rt">
                            <div class="item_lable">送修人：</div>
                            <div class="item_val">
                              {{ item.repairCus ? item.repairCus : '- -' }}
                              <van-icon color="#59A1FF" name="phone" size="10" />
                              <span v-if="item.repairCusphone" class="item_tel"
                                    @click="handleTel(getAllName('送修人',item.repairCus), item.repairCusphone)">{{
                                  item.repairCusphone ? item.repairCusphone : ''
                                }}</span>
                            </div>
                          </div>
                        </div>
                        <div class="item_box">
                          <div class="item_lt">
                            <div class="item_lable">进场里程：</div>
                            <div class="item_val">{{ item.carMile ? item.carMile + '(公里)' : '- -' }}</div>
                          </div>
                        </div>
                        <div class="item_box">
                          <div class="item_lt">
                            <div class="item_lable">合计金额：</div>
                            <div class="item_val">{{ item.repairVoucherAmt ? item.repairVoucherAmt + '(元)' : '- -' }}
                            </div>
                          </div>
                        </div>
                        <div class="item_box">
                          <div class="item_lt">
                            <div class="item_lable">卡券抵用：</div>
                            <div class="item_val">{{ item.repairTotalSum ? item.repairTotalSum + '(元)' : '- -' }}</div>
                          </div>
                        </div>
                        <div class="item_box2">
                          <div class="item_lt">
                            <div class="item_lable">人工操作：</div>
                            <div class="item_val">{{ item.repairRstRemark ? item.repairRstRemark : '- -' }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </van-list>
                <div v-else class="no_icon">
                  <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                  <div class="no_icon_txt">暂无内容</div>
                </div>
              </van-pull-refresh>
            </div>
          </div>
        </van-col>
        <van-col span="14">

          <div class="con_box">
            <div class="detailbox_item">
              <div class="detailbox_item_title">任务描述</div>
              <div class="contact_content">
                <div
                  style="font-size: 12px;line-height: 24px;word-break: break-all;margin: 10px 20px;height: 50px;overflow-y: auto;background: #f9fafc;">
                  {{ taskInfo.taskDes && taskInfo.taskDes != '' ? taskInfo.taskDes : '暂无' }}
                </div>
              </div>
              <div class="detailbox_item_title">联系信息</div>
              <div class="contact_content">
                <div style="display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;margin: 10px 5px;">
                  <div class="contact_item" style="margin: 0 5px;">
                    <div class="contact_top">
                      <div class="item_label" style="width: 100%;text-align: center;">客户信息</div>
                    </div>
                    <div class="contact_bottom">
                      <div class="item_name">
                        <div class="txt1">姓名：</div>
                        <div class="txt2">{{ carInfo.customerName ? carInfo.ownerName : '-' }}</div>
                      </div>
                      <div class="item_icon">
                        <img class="item_img" src="@/assets/images/wechat_icon.png" @click="getExList(dataSource)" />
                        <img class="item_img" src="@/assets/images/tel_icon.png"
                             @click="handleTel(getAllName('客户',carInfo.customerName), carInfo.mobile)" />
                      </div>
                    </div>
                    <div class="contact_bottom">
                      <div class="item_name">
                        <div class="txt1">电话：</div>
                        <div class="txt2">{{ carInfo.mobile ? carInfo.mobile : '-' }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="contact_item" style="margin: 0 5px;">
                    <div class="contact_top">
                      <div class="item_label" style="width: 100%;text-align: center;">车主信息</div>
                    </div>
                    <div class="contact_bottom">
                      <div class="item_name">
                        <div class="txt1">姓名：</div>
                        <div class="txt2">{{ carInfo.ownerName ? carInfo.ownerName : '-' }}</div>
                      </div>
                      <div class="item_icon">
                        <img class="item_img" src="@/assets/images/wechat_icon.png" @click="getExList(dataSource)" />
                        <img class="item_img" src="@/assets/images/tel_icon.png"
                             @click="handleTel(getAllName('车主',carInfo.ownerName), carInfo.ownerPhone)" />
                      </div>

                    </div>
                    <div class="contact_bottom">
                      <div class="item_name">
                        <div class="txt1">电话：</div>
                        <div class="txt2">{{ carInfo.ownerPhone ? carInfo.ownerPhone : '-' }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="contact_item" style="margin: 0 5px;">
                    <div class="contact_top">
                      <div class="item_label" style="width: 100%;text-align: center;">送修人</div>
                    </div>
                    <div class="contact_bottom">
                      <div class="item_name">
                        <div class="txt1">姓名：</div>
                        <div class="txt2">{{ carInfo.contactPeople ? carInfo.contactPeople : '-' }}</div>
                      </div>
                      <div class="item_icon">
                        <img class="item_img" src="@/assets/images/wechat_icon.png" @click="getExList(dataSource)" />
                        <img class="item_img" src="@/assets/images/tel_icon.png"
                             @click="handleTel(getAllName('送修人',carInfo.contactPeople), carInfo.contactPhone)" />
                      </div>
                    </div>
                    <div class="contact_bottom">
                      <div class="item_name">
                        <div class="txt1">电话：</div>
                        <div class="txt2">{{ carInfo.contactPhone ? carInfo.contactPhone : '-' }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="detailbox_item">
                    <div class="contact_item" style="">
                      <div class="contact_top">
                        <div class="item_label" tyle="width: 100%;text-align: center;">客户群信息</div>
                      </div>
                      <van-pull-refresh v-model="groupRefreshing" class="groupInfo_content h55" @refresh="groupOnRefresh">
                        <van-list
                          v-if="groupList && groupList.length != 0"
                          v-model="groupLoading"
                          :finished="groupFinished"
                          finished-text="没有更多了"
                          @load="getCustomerGroupInfo"
                        >
                          <div class="groupInfo">
                            <div v-for="(item, index) in groupList" :key="index" class="groupInfo_item">
                              <div class="groupInfo_icon">群</div>
                              <div class="groupInfo_detail">
                                <div class="groupInfo_name">{{ item.groupName }}</div>
                                <div class="groupInfo_txt">
                                  <span class="groupInfo_span">{{ item.groupNums }}人</span>|
                                  <span class="groupInfo_span1">群主：{{ item.adminUserName }}</span>
                                </div>
                                <div class="groupInfo_txt1">创建时间：{{ item.createTime }}</div>
                              </div>
                              <!-- <div class="groupInfo_btn" @click.stop="handleShowUser(item)">查看群成员</div> -->
                              <div class="groupInfo_btn">
                                <div @click.stop="handleShowUser(item)">查看群成员</div>
                                <div class="to_chat">
                                  <i class="iconfont  icon-dir-right" style="color: #4898FF;font-size: 22px;"
                                     @click="openChat(item)"></i>
                                </div>
                              </div>
                            </div>
                          </div>
                        </van-list>
                        <div v-else class="no_icon" style="padding: 0">
                          <!--                        <img class="no_icon_img" src="@/assets/images/no_icon.png" />-->
                          <div class="no_icon_txt" style="margin: 0">暂无内容</div>
                        </div>
                      </van-pull-refresh>
                    </div>
                  </div>
                </div>
              </div>
              <!--            <div v-if="dataSource.oneBillStauts == '未处理'" class="addBtn">-->
              <div class="addBtn" v-if="taskInfo.oneBillStatus == '未处理'">
                <div class="orderItem_filebox" @click="addFollow">
                  <i class="iconfont icon-add"></i>
                  添加跟进
                </div>
              </div>
            </div>
          </div>

          <div class="con_box" style="overflow: unset">
            <div class="detailbox_item">
              <div class="detailbox_item_title">跟进信息</div>

              <div v-if="followHistoryList && followHistoryList.length != 0" class="tableData">
                <div class="tableDatabox">
                  <table id="followTable">
                    <tr>
                      <th>跟进类型</th>
                      <th>跟进人员</th>
                      <th>跟进时间</th>
                      <th>跟进结果</th>
                      <th>跟进备注</th>
                    </tr>
                    <tbody>
<!--                    <tr v-for="(item, index) in followHistoryList" :key="index">-->
<!--                      <td>{{ item.taskTypeName }}</td>-->
<!--                      <td>{{ item.taskPersonName }}</td>-->
<!--                      <td>{{ item.followDate | formatDate('yyyy-MM-dd') }}</td>-->
<!--                      <td>{{ item.followResult }}</td>-->
<!--                      <td>{{ item.followNote }}</td>-->
<!--                    </tr>-->
                    <tr v-for="(item, index) in followHistoryList" :key="index">
                      <td>{{ item.taskTypeName }}</td>
                      <td>{{ item.taskPersonName }}</td>
                      <td>{{ item.followDate | formatDate('yyyy-MM-dd') }}</td>
                      <td>{{ item.followResult }}</td>

                      <!-- 合并备注列 -->
                      <template v-if="!item.noteHidden">
                        <td :rowspan="item.noteRowspan" style="text-align: center; vertical-align: middle;">{{ item.followNote }}</td>
                      </template>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div v-else class="no_icon pt80" style="height: 197px">
                <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                <div class="no_icon_txt">暂无数据</div>
              </div>
            </div>
          </div>

          <div class="con_box" style="overflow: unset">
            <div class="detailbox_item">
              <div class="detailbox_item_title">车辆附件</div>
              <div v-if="attachmentList && attachmentList.length != 0" class="tableData">
                <div class="tableDatabox">
                  <table>
                    <tr>
                      <th style="width: 35%">附件编号</th>
                      <th style="width: 35%">附件名称</th>
                      <th style="width: 15%">附件类型</th>
                      <th style="width: 15%">下载查看</th>
                    </tr>
                    <tbody>
                    <tr v-for="(item, index) in attachmentList" :key="index">
                      <td style="word-break: break-all">{{ item.attaNumber }}</td>
                      <td style="word-break: break-all">{{ item.attaName }}</td>
                      <td style="word-break: break-all">{{ item.attaType }}</td>
                      <td>
                        <i class="iconfont icon-download" style="font-size: 20px;" @click="downloadFile(item)"></i>
                        <van-icon v-if="checkImgType(item.attaName)" name="eye-o" size="20px" @click="lookFile(item)"></van-icon>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div v-else class="no_icon pt80" style="height: 197px">
                <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                <div class="no_icon_txt">暂无数据</div>
              </div>
            </div>
          </div>
        </van-col>
      </van-row>

      <FollowEdit
        :billId="taskInfo.billId"
        :dataSource="taskInfo"
        :pageType="1"
        :visible="followEditVisible"
        :max-next-follow-date="maxNextFollowDate"
        @close="followEditVisible = false"
        @initData="initData"
      ></FollowEdit>
      <!-- 群成员列表 -->
      <van-dialog v-model="showUser" :before-close="beforeClose" :showConfirmButton="false" show-cancel-button title>
        <van-pull-refresh v-model="userRefreshing" class="userList_content h600" @refresh="userOnRefresh">
          <van-list
            v-if="wxUserList && wxUserList.length != 0"
            v-model="userLoading"
            :finished="userFinished"
            finished-text="没有更多了"
            @load="showUserData"
          >
            <div class="contact_list">
              <div v-for="(item, index) in wxUserList" :key="index" class="contact_item flex userList_item membot">
                <div class="contact_lt flex">
                  <img class="contact_header" src="@/assets/images/header_img.png" />
                  <div class="contact_name">{{ item.menberName ? item.menberName : '-' }}</div>
                </div>
                <div class="contact_type">{{ item.memberType ? item.memberType : '-' }}</div>
              </div>
            </div>
          </van-list>
          <div v-else class="no_icon pt80">
            <img class="no_icon_img" src="@/assets/images/no_icon.png" />
            <div class="no_icon_txt">暂无数据</div>
          </div>
        </van-pull-refresh>
      </van-dialog>
      <TaskTypeSelect
        :list="taskTypeList"
        :value="followParams.taskTypeId"
        :visible="showSelectPicker"
        @close="showSelectPicker = false"
        @multipleSubmit="multipleSubmit"
      ></TaskTypeSelect>
      <div class="icon-label">
        <div v-if="isAiccUser" class="carSearchIcon" @click="toSeatInfo">
          <van-image :src="require('@/assets/images/seatInfo.png')" width="35" height="35" />
        </div>
        <div class="carSearchIcon" @click="showCarSearch=true">
          <van-image :src="require('@/assets/images/car.png')" width="35" height="35" />
        </div>
        <div v-if="taskInfo.oneBillStatus == '未处理'" class="phoneNumberIcon" @click="showCall=true">
          <!-- <van-icon name="phone" size="30" color="#00BE63"/> -->
          <i class="iconfont icon-dialpad" style="color:#409eff;font-size:35px;" />
        </div>
      </div>
      <search-popup :showPopup.sync="showCarSearch"/>
      <van-dialog v-model="showCall" confirm-button-color="#ff1100" confirm-button-text="取消" width="500px">
        <div class="calldialogClass">
          <div
            style="text-align: right;width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;">
            <input v-model="calltel" placeholder="请输入客户号码" placeholder-class="input-placeholder"
                   style="width: 40%;border: 1px solid;border-radius: 10px;font-size: 20px;padding: 0 10px;"
                   @input="calltel = calltel.replace(/[^\d]/g, '').slice(0, 11)" maxlength="11" type="tel"
            />
            <div class="callButtonClass" style="text-align: center;width: 2rem;font-size: 20px;padding: 10px;"
                 @click="handleTel(getAllName('车主',''),calltel)">
              拨号
            </div>
          </div>
        </div>
      </van-dialog>
      <van-image-preview v-model="showPicture" :images="pictureUrl" />

      <!--  更新保养记录  -->
      <van-dialog v-model="updateMaintainVisible" width="20%" title="保养记录登记" show-confirm-button show-cancel-button @confirm="handleUpdateMaintainConfirm">

        <div style="height: 300px">
          <van-field v-model="updateMaintainData.vinCode" label="车架号码" input-align="right" readonly/>
          <van-field v-model="updateMaintainData.maintainDate" label="保养时间" input-align="right" required readonly clickable @click="showPickerDate=true;" placeholder="点击选择时间">
          </van-field>
          <van-field v-model="updateMaintainData.maintainMileage" label="保养里程" input-align="right" required placeholder="请输入里程数">
            <template slot="button">km</template>
          </van-field>
        </div>
        <van-popup v-model="showPickerDate" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            @confirm="handleConfirmDate"
            @cancel="showPickerDate=false"
          />
        </van-popup>
      </van-dialog>
    </div>
  </div>

</template>

<script>
import {
  DatetimePicker,
  Dialog,
  Empty,
  Field,
  Form,
  ImagePreview,
  Notify,
  Search,
  Tab,
  Tabs,
  Toast,
  Uploader
} from 'vant'
import taskApi from '@/api/taskApi'
import repairApi from '@/api/repairApi'
import progressCustom from '@/components/progress/progressCustom'
import { getCookies } from '@/utils/util.js'
import carApi from '@/api/carApi'
import FollowEdit from '../taskCenter/components/FollowEdit.vue'
import commonApi from '@/api/commonApi'
import aiccCallApi from '@/apiaicc/aiccCallApi'
import axios from 'axios'
import qs from 'qs'

import { isPhone } from '../../utils/util'
import TaskTypeSelect from './components/taskTypeSelect.vue'
import SearchPopup from './components/carInfoSearch/searchPopup.vue'

const base_url = process.env.BASE_API

export default {
  name: 'taskCenterDetail',
  components: {
    SearchPopup,
    Search,
    Empty,
    Field,
    Form,
    Uploader,
    DatetimePicker,
    Tab,
    Tabs,
    ImagePreview,
    Toast,
    FollowEdit,
    TaskTypeSelect,
    progressCustom,
    Dialog
  },
  props: {
    // detailId: {
    //   type: String,
    //   default: null
    // },
    taskData: {
      type: Object,
      default: null
    }
  },

  watch: {
    taskData: {
      handler: function(val, oldVal) {
        if (JSON.stringify(val) == JSON.stringify(oldVal)) {
          return
        }
        Object.keys(this.dataSource).forEach(key => delete this.dataSource[key])
        if (val) {
          if (!!val.carId) {
            this.dataSource.carId = val.carId
            this.dataSource.carNo = val.carNo
            this.dataSource.vinCode = val.vinCode
            this.relevanceParams = {...val.taskParams}
            this.getDetailInfo()
          }
        }
      },
      deep: true,
      immediate: false
    },
    audioId: function(val, nval) {
      let that = this
      if (val != nval) {
        var audios = document.getElementById('audio')
        audios.load()
        clearInterval(that.playInv)
        that.playTime = 0
        that.playIngTime = 0
        // if(nval!=''){
        //   that.audioStatus=''
        // }
      }
    }
  },
  data() {
    return {
      followEditVisible: false,
      showTimerPicker: false,
      dataSource: {
        billId: '1', //单据id
        carNo: '', //车牌号
        carId: '', //车牌ID
        vinCode: ''
      },
      uploader: [],
      columns: [],
      showSelectPicker: false,
      disabled: false,
      tabActive: 0,
      recordList: [],
      statusList: [
        {
          name: '已处理',
          code: 1,
          check: false
        },
        {
          name: '未处理',
          code: 2,
          check: false
        }
      ],
      userId: getCookies('userId'), //用户ID，必填，String
      carInfo: {
        id: '', //单车id
        vinCode: '', //车架号
        fixCenterId: '', //维修中心ID
        fixCenterName: '', //维修中心名称
        fixCenterNumber: '', //维修中心编码
        serverPsnId: '', //所属服务顾问ID
        serverPsnName: '', //所属服务顾问名字
        serverPsnNumber: '', //所属服务顾问编码
        carModelId: '', //车型ID
        carModelNameName: '', //车型名称
        carModelNumber: '', //车型编码
        lastIn: '', //上次进场时间
        carMile: '', //行驶里程数
        deliverTime: '', //购车时间
        inusuranceDate: '', //保险到期时间
        repairtime: '', //保修到期时间
        label: [] //标签
      },
      cardList: [],
      repairList: [],
      applyParams: {
        codeNo: '', //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        startDateIn: '', //预约开始时间，日期yyyy-MM-dd
        endDateIn: '', //预约结束时间，日期yyyy-MM-dd
        fixCenterId: '', //维修中心ID值
        serverPsnId: '', //所属服务顾问，ID值
        billStatus: '', //预约单状态
        bookingType: '', //预约单类型
        fixCenterName: '',
        serverPsnName: '',
        enDateIn: '',
        billSatus: ''
      },
      relevanceParams: {
        codeNo: '', //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        oneBillStatus: 'unDeal', //任务一级状态
        twoBillStatus: '', //任务二级状态
        taskTypeId: '', //任务类型ID值
        taskPersonId: '', //任务跟进人，ID值
        fixCenterId: '',
        serverPsnId: '',
        taskStartCreateTime: '',
        taskEndCreateTime: '',
        isExceed: '', //是否逾期，1为是，0为否
        isGenRepBook: '', //是否生成维修预约单
        billId: '', //本身单据ID，此为详细界面使用
        carId: '', //车辆ID，此为详细界面使用
        isFactTask: '', //是否厂家任务
        isHuiYuan: '', //是否会员客户
        isHYCar: '', //是否会员绑定车辆
        userId: getCookies('userId') //用户ID，必填，String
      },
      applyList: [],
      relevanceList: [],
      repairRequestParams: {
        codeNo: '', //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        startDateIn: '', //进场开始时间，日期yyyy-MM-dd
        endDateIn: '', //进场结束时间，日期yyyy-MM-dd
        startFinishDate: '', //完工开始时间，日期yyyy-MM-dd
        endFinishDate: '', //完工结束时间，日期yyyy-MM-dd
        startSettleTime: '', //结算开始时间，日期yyyy-MM-dd
        endSettleTime: '', //结算结束时间，日期yyyy-MM-dd
        workBillType: '', //工单类型，枚举
        serverPsnId: '', //维修中心ID
        fixCenterId: '', //服务顾问ID
        userId: getCookies('userId') //用户ID，必填，String
      },
      relatTabList: [
        {
          name: '未处理',
          value: 'unDeal'
        },
        {
          name: '已处理',
          value: 'isDeal'
        }
      ],
      relatTabIndex: 0,
      finished: false,
      refreshing: false,
      isLoadData: false,
      loading: false,
      groupList: [],
      wxUserList: [],
      showUser: false,
      groupRefreshing: false,
      groupLoading: false,
      groupFinished: false,
      groupPageNo: 1,
      groupIsLoadData: false,

      userRefreshing: false,
      userLoading: false,
      userFinished: false,
      userPageNo: 1,
      userIsLoadData: false,
      groupData: {},
      userInfo: JSON.parse(localStorage.getItem('userInfo')),
      taskTypeList: [],
      followParams: {
        carId: '', //车辆ID，必填，
        taskTypeId: '', //任务类型ID，多个勇;隔开
        isDesc: true, //布尔类型，必填，true为倒序
        taskTypeName: ''
      },
      followRefreshing: false,
      followLoading: false,
      followFinished: false,
      followPageNo: 1,
      followHistoryList: [],
      followIsLoadData: false,
      audioStatus: 'pause',
      playIndex: '-1',
      audioTime: '',
      playTime: 0, //播放进度条
      playIngTime: 0, //播放时间
      playInv: '',
      tapeFile: '',
      audioId: '',
      showCall: false,
      showCarSearch: false,
      calltel: '',
      attachmentList: [],
      radioModel: '1',
      taskInfo: {},
      carAssociatedInfo: {},
      followEditDialogVisible: false,
      showPicture: false,
      pictureTitle: '',
      pictureUrl: [],

      // 保养记录登记
      updateMaintainVisible: false,
      showPickerDate: false,
      updateMaintainData: {
        carId: '',
        vinCode: '',
        maintainDate: '',
        maintainMileage: '',
      },
      currentDate: new Date(),
      carInfoKhyy: {}, //运营门店维度车辆信息
      maxNextFollowDate: '', //最大下次跟进时间
      isAiccUser: localStorage.getItem('isAiccUser'),
    }
  },
  filters: {
    formatDate: function(value, args) {
      var dt = new Date(value)
      if (args == 'yyyy-MM-dd') {
        let year = dt.getFullYear()
        let month = dt.getMonth() + 1
        let date = dt.getDate()
        month = month < 10 ? '0' + month : month
        date = date < 10 ? '0' + date : date
        return `${year}-${month}-${date}`
      }
    }
  },

  mounted() {
  },
  beforeRouteLeave(to, from, next) {
    // 保存滚动位置
    this.scrollTop = this.$refs.scrollContainer.scrollTop
    next()
  },
  methods: {
    async getDetailInfo() {
      this.getCoupon(this.dataSource.carId)
      this.getCarInfoBase(this.dataSource.carId)
      this.getCarAssociatedInfo(this.dataSource.carId)
      this.getRelevanceTask()
      this.getRepairworkorder()
      this.groupPageNo = 1
      this.userPageNo = 1
      this.getCustomerGroupInfo()
      this.getTaskType()
      this.getAttachmentList()
    },

    // 获取卡券信息
    getCoupon(id) {
      repairApi
        .getCoupon({
          id,
          userId: this.userId,
          isReturnInvalidCoupons: '是'
        })
        .then((res) => {
          this.cardList = res.data
        })
    },
    // 车辆详情
    getCarInfoBase(id) {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true
      })
      carApi
        .getCarInfoBase({
          id
        })
        .then((res) => {
          Toast.clear()
          if (res.code == 1) {
            res.data.label = res.data.label ? res.data.label.split(';') : []
            if (res.data && res.data.label && res.data.label.length != 0) {
              res.data.label.length = res.data.label.length - 1
            }
            this.carInfo = res.data
            this.queryCarInfoKhyy(id, this.carInfo.fixCenterId)
          }
        })
    },
    getCarAssociatedInfo(carId) {
      this.carAssociatedInfo = {}
      carApi.getCarAssociatedInfo({ 'carId': carId }).then((res) => {
        if (res.code == 1) {
          this.carAssociatedInfo = res.data
        }
      })
    },

    // 关联任务
    getRelevanceTask() {
      this.relevanceList = []
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true
      })
      taskApi
        .getCustomerTaskList({
          ...this.relevanceParams,
          codeNo: this.dataSource.vinCode,
          pageNo: 1,
        })
        .then((res) => {
          Toast.clear()
          this.relevanceList = res.data
          console.log('任务信息：', this.relevanceList)
          this.radioModel = 0
          this.taskInfo = {}
          if (this.relevanceList.length > 0) {
            this.taskInfo = this.relevanceList[0]
          }
          if (this.taskInfo.taskTypeName=='续保到期提醒' && this.taskInfo.renewalNode) {
            if (this.taskInfo.taskExceedTime) {
              this.maxNextFollowDate = new Date(this.taskInfo.taskExceedTime)
              if (this.taskInfo.duration) {
                this.maxNextFollowDate.setDate(this.maxNextFollowDate.getDate() + this.taskInfo.duration)
              }
            }
          } else {
            this.maxNextFollowDate = ''
          }
        })
    },

    // 履历
    getRepairworkorder(id) {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true
      })
      carApi
        .getRepairworkorder({
          id: this.dataSource.carId
        })
        .then((res) => {
          this.repairList = res.data
          this.finished = true
          Toast.clear()
        })
        .catch((res) => {
          // this.loading = false
          // this.isLoadData = false
        })
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      this.recordList = []
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.refreshing = false
      this.getRepairworkorder()
    },

    // 添加跟进记录
    addFollow() {
      if (this.taskInfo.twoBillStatus == '邀约成功') {
        return
      }
      if (this.taskInfo.isChild && new Date() < new Date(this.taskInfo.shuldFollowTime)) {
        Dialog.confirm({
          message: '当前任务为子任务且未到上次设置的应跟进日期，确认现在跟进？'
        })
          .then(() => {
            this.followEditVisible = true
          })
          .catch(() => {
            // on cancel
          })
      } else {
        this.followEditVisible = true
      }
      // this.followEditVisible = true
      // this.followEditDialogVisible = true
      // this.$nextTick(() => {
      //   // this.$refs.followEditDialog.billId = this.taskInfo.billId
      //   // this.$refs.followEditDialog.dataSource = {...this.taskInfo}
      //   this.$refs.followEditDialog.init(this.taskInfo)
      // })
    },
    getAllName(type, name) {
      let allname = this.dataSource.carNo ? this.dataSource.carNo : (this.dataSource.vinCode ? 'VIN:' + this.dataSource.vinCode.substring(this.dataSource.vinCode.length - 6) : '')
      return allname + type + (name ? name : '')
    },
    handleTel(telname, tel) {
      if (localStorage.getItem('isAiccUser') + '' == 'true') {
        if (this.taskInfo.oneBillStatus != '未处理') {
          Toast('该任务已处理完成，无需再次联系客户')
          return
        }
        this.call(telname, tel)
      } else {
        //走之前的方法
        if (isPhone()) {
          window.location.href = `tel:${tel}`
        } else {
          Toast('请在手机端使用此功能')
        }
      }
    },
    goRepairDetail(data) {
      this.$router.push({
        path: '/repairOrderDetail',
        query: {
          billId: data.repairId
        }
      })
    },
    initData() {
      this.$emit('initData')
    },
    // 下拉刷新
    groupOnRefresh() {
      // 清空列表数据
      this.groupList = []
      this.groupFinished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.groupLoading = true
      this.groupRefreshing = false
      this.groupInitData()
    },
    groupInitData() {
      this.groupPageNo = 1
      this.getCustomerGroupInfo()
    },
    // 获取群信息
    getCustomerGroupInfo() {
      if (this.groupIsLoadData) return
      this.groupIsLoadData = true
      this.groupLoading = true
      this.groupFinished = false
      taskApi
        .getCustomerGroupInfo({
          carNo: this.dataSource.carNo || 'undefined', //车牌号码，
          wetChatId: this.userInfo.corpGroup ? this.userInfo.corpGroupId : this.userInfo.corpId, //企业微信ID，
          pageNo: this.groupPageNo //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        })
        .then((res) => {
          Toast.clear()
          if (this.groupPageNo == 1) {
            this.groupList = res.data || []
          } else {
            this.groupList = this.groupList.concat(res.data || [])
          }
          this.groupPageNo += 1

          if (res.data.length < 10) {
            this.groupFinished = true
            this.groupIsLoadData = true
          }
          this.groupIsLoadData = false
          this.groupLoading = false
        })
        .catch((res) => {
          this.groupLoading = false
          this.groupIsLoadData = false
        })
    },

    handleShowUser(data) {
      this.showUser = true
      this.groupData = data
      this.userInitData()
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
        return done(false)
      } else {
        this.wxUserList = []
        return done()
      }
    },

    // 群成员下拉刷新
    userOnRefresh() {
      // 清空列表数据
      this.wxUserList = []
      this.userFinished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.userLoading = true
      this.userRefreshing = false
      this.userInitData()
    },
    userInitData() {
      this.userPageNo = 1
      this.showUserData()
    },
    //  查看群成员
    showUserData() {
      if (this.userIsLoadData) return
      this.userIsLoadData = true
      this.userLoading = true
      this.userFinished = false
      taskApi
        .getMemberInfo({
          groupId: this.groupData.groupId, //企业群ID，必填
          // groupId: '3104758703119260', //企业群ID，必填
          pageNo: this.userPageNo //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        })
        .then((res) => {
          res.data.forEach((item) => {
            item.memberType = item.memberType.replace('["', '')
            item.memberType = item.memberType.replace('"]', '')
          })
          console.log(this.wxUserList)
          Toast.clear()
          if (this.userPageNo == 1) {
            this.wxUserList = res.data || []
          } else {
            this.wxUserList = this.wxUserList.concat(res.data || [])
          }
          this.userPageNo += 1

          if (res.data.length < 10) {
            this.userFinished = true
            this.userIsLoadData = true
          }
          this.userIsLoadData = false
          this.userLoading = false
        })
        .catch((res) => {
          this.userLoading = false
          this.userIsLoadData = false
        })
    },
    // 获取任务类型
    getTaskType() {
      commonApi.getTaskType({}).then((res) => {
        this.taskTypeList = res.data
        this.taskTypeList.unshift({
          name: '全部',
          billId: ''
        })
        this.followParams.taskTypeName = this.taskTypeList[0].name
        this.followParams.taskTypeId = this.taskTypeList[0].billId
        this.followInitData()
      })
    },
    followInitData() {
      this.followPageNo = 1
      this.getFollowData()
    },
    //  获取历史跟进
    async getFollowData() {
      if (this.followIsLoadData) return
      this.followIsLoadData = true
      this.followLoading = true
      this.followFinished = false
      Toast.loading('数据加载中...')
      this.followParams.carId = this.dataSource.carId
      taskApi
        .getCustomerTaskHisFollow({
          pageNo: this.followPageNo, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
          ...this.followParams
        })
        .then(async (res) => {
          Toast.clear()
          if (this.followPageNo == 1) {
            // await this.getFollowHistoryCalls(res.data)
            this.followHistoryList = res.data || []
          } else {
            // await this.getFollowHistoryCalls(res.data)
            this.followHistoryList = this.followHistoryList.concat(res.data || [])
          }

          this.followHistoryList = this.mergedFollowHistoryList(this.followHistoryList)
          this.followPageNo += 1

          if (res.data.length < 10) {
            this.followFinished = true
            this.followIsLoadData = true
          }
          this.followIsLoadData = false
          this.followLoading = false
        })
        .catch((res) => {
          this.followLoading = false
          this.followIsLoadData = false
        })
    },
    mergedFollowHistoryList(dataList) {
      const list = dataList.map(item => ({ ...item }));

      for (let i = 0; i < list.length; i++) {
        if (list[i].noteHidden) continue;

        list[i].noteRowspan = 1;

        for (let j = i + 1; j < list.length; j++) {
          if (list[i].followNote === list[j].followNote) {
            list[i].noteRowspan++;
            list[j].noteHidden = true;
          } else {
            break;
          }
        }
      }
      return list;
    },

    // 多选确认
    multipleSubmit(data) {
      console.log('data', data)
      if (data && data.length != 0) {
        let arr = []
        const containsValue = data.some((item) => item.billId == '')
        if (containsValue) {
          this.followParams.taskTypeName = '全部'
          this.followParams.taskTypeId = ''
        } else {
          this.followParams.taskTypeName = data.map((item) => item.name).join(',')
          let ids = data.map((item) => item.billId)
          ids.forEach((item) => {
            arr.push(item)
          })
          this.followParams.taskTypeId = arr.join(';')
        }

        this.followInitData()
      }
    },
    async getFollowHistoryCalls(data) {
      let that = this
      if (data != null && data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          var billId = data[i].billId
          // that.$set(that.dataSource.followEntry[i],"calls", [])
          data[i].calls = []
          await aiccCallApi
            .getFollowCall({
              billId: billId
            })
            .then((res) => {
              if (res.code == 0) {
                // that.$set(that.dataSource.followEntry[i],"calls", res.data)
                data[i].calls = res.data
              }
            })
        }
      }
    },
    call(telname, tel) {
      let vm = this
      if (tel === '' || tel === null) {
        Dialog.alert({
          title: '',
          message: '号码不能为空'
        }).then(() => {
          // on close
        })
        return
      } else {
        //手机
        if (!vm.validMobile(tel)) {
          Dialog.alert({
            title: '',
            message: '号码不正确'
          }).then(() => {
            // on close
          })
          return
        }
      }
      let isPc = vm.checkIsPC()
      Toast.loading({
        message: '拨打中，请稍后...',
        forbidClick: true,
        overlay: true
      })
      // isPc = true
      if (isPc) {
        //如果是PC端
        vm.doPcCallOut(telname, tel, isPc)
      } else {
        //唤起小程序
        vm.doMobileCallout(telname, tel, isPc)
      }
    },
    doMobileCallout(telname, tel, isPc) {
      let vm = this
      aiccCallApi
        .callOut({
          customerNumber: tel,
          customerName: telname,
          billId: this.taskInfo.billId,
          billOrgId: null,
          carId: this.taskInfo.carId,
          carModelName: this.taskInfo.carModelNameName,
          fixCenterId: this.taskInfo.fixCenterId,
          fixCenterName: this.taskInfo.fixCenterName,
          insCmpName: this.taskInfo.insCmpName,
          type: isPc == true ? 'pc' : 'phone'
        })
        .then((callres) => {
          console.log('AICC获取tokenInfo成功返回信息:', callres)
          if (callres.code == 0) {
            vm.tokenInfo = callres.data
            vm.toMiniprogram()
          } else {
            Toast.clear()
            Dialog.alert({
              title: '',
              message: callres.msg
            }).then(() => {
              // on close
            })
            if (res.code == -900 && res.msg == '坐席未绑定手机号码,请先绑定手机号码') {
              this.$router.push('/seatPhone')
            }
          }
        })
    },
    // 评估申请跳转小程序
    toMiniprogram() {
      let vm = this
      axios({
        url: `${base_url}/proxy/qywx/jsdkConfig`,
        method: 'post',
        data: qs.stringify(
          // { url: 'http://wycl.autocnd.com:41080/ysc/assessManageDetail' },
          {
            url: location.href.split('?')[0],
            type: 'app'
          },
          {
            encode: false
          }
        ),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          satoken: getCookies('token')
        }
      }).then((res) => {
        console.log('jsdkConfig:', res)
        let jsdk = res.data.data
        localStorage.setItem('jsdk', JSON.stringify(res.data.data))
        wx.agentConfig({
          corpid: jsdk.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
          agentid: jsdk.agentid, // 必填，企业微信的应用id （e.g. 1000247）
          timestamp: jsdk.timestamp, // 必填，生成签名的时间戳
          nonceStr: jsdk.nonceStr, // 必填，生成签名的随机串
          signature: jsdk.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
          jsApiList: ['launchMiniprogram'], //必填，传入需要使用的接口名称
          success: function(res) {
            console.log('agentConfig权限成功返回信息:', res)
            // wx9e482fe1abf18c87
            // appid: 'wx02e51afc29cecca4', // 需跳转的小程序appid
            wx.invoke(
              'launchMiniprogram',
              {
                appid: vm.tokenInfo.appId, // 需跳转的小程序appid
                // appid: 'wx9e482fe1abf18c87', // 测试跳转的appid
                path: `pages/calling/calling?token=${vm.tokenInfo.token}&enterpriseId=${vm.tokenInfo.enterpriseId}&cno=${vm.tokenInfo.cno}&called_number=${vm.tokenInfo.calledNumber}&platform=${vm.tokenInfo.platform}&type=1` // 所需跳转的小程序内页面路径及参数
              },
              function(res) {
                Toast.clear()
                if (res.err_msg == 'launchMiniprogram:ok') {
                  // 正常
                } else {
                  // 错误处理
                }
              }
            )
          },
          fail: function(res) {
            Toast.clear()
            console.log('agentConfig权限失败返回信息:', res)
            if (res.errMsg.indexOf('function not exist') > -1) {
              alert('版本过低请升级')
            }
          }
        })
      })
    },
    doPcCallOut(telname, tel, isPc) {
      aiccCallApi
        .callOut({
          customerNumber: tel,
          customerName: telname,
          billId: this.taskInfo.billId,
          billOrgId: null,
          carId: this.dataSource.carId,
          carModelName: this.carInfo.carModel,
          fixCenterId: this.carInfo.fixCenterId,
          fixCenterName: this.carInfo.fixCenterName,
          insCmpName: this.taskInfo.insCmpName,
          type: isPc == true ? 'pc' : 'phone'
        })
        .then((res) => {
          Toast.clear()
          if (res.code == 0) {
            Notify({
              type: 'success',
              message: '呼叫成功，请稍后'
            })
          } else {
            Dialog.alert({
              title: '',
              message: res.msg
            }).then(() => {
              // on close
            })
            if (res.code == -900 && res.msg == '坐席未绑定IP话机,请先绑定IP话机') {
              this.$router.push('/seatPhone')
            }
          }
        })
    },
    validMobile(str) {
      return /^1[3456789]\d{9}$/.test(str) || /^0[0-9-]{10,13}$/.test(str)
    },
    checkIsPC() {
      var userAgentInfo = navigator.userAgent
      var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
      var flag = true
      for (var v = 0; v <= Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) >= 0) {
          flag = false
          break
        }
      }
      return flag
    },
    play(data, index) {
      let that = this
      if (data.localRecordFile) {
        let that = this
        let param = {
          id: data.id,
          type: 1
        }
        aiccCallApi.getCallTap(param).then((res) => {
          if (res.code == 0) {
            that.tapeFile = res.data
            console.log('tapeFile-', this.tapeFile)
            that.audioId = that.tabIndex + '-' + index
            console.log('tapeFile-', this.tapeFile)
            that.audioStatus = index
            var audios = document.getElementById('audio')
            // audio.src=data.localRecordFile
            // audios.src=this.tapeFile
            that.playIndex = index
            console.log(that.audioStatus)

            setTimeout(() => {
              audios.play()
              that.playInv = setInterval(() => {
                if (that.playIngTime >= data.bridgeDuration) {
                  clearInterval(that.playInv)
                  that.audioStatus = ''
                  audios.pause()
                  that.playTime = 0
                  that.playIngTime = 0
                  that.playIndex = '-1'
                } else {
                  that.playIngTime++
                  // that.playTime += 100 / audios.duration
                  if (that.playTime < 100) {
                    that.playTime += 100 / data.bridgeDuration
                  } else {
                    that.playTime = 100
                  }
                }
              }, 1000)
            }, 500)
          } else {
            Dialog.alert({
              title: '',
              message: res.msg
            }).then(() => {
              // on close
            })
          }
        })
      } else {
        Dialog.alert({
          title: '',
          message: '该记录暂无音频'
        }).then(() => {
          // on close
        })
      }
    },
    stop(index) {
      let that = this
      console.log(that.playIndex)
      var audios = document.getElementById('audio')
      audios.pause()
      that.audioStatus = index
      clearInterval(that.playInv)
      this.playIndex = '-1'
    },
    getAudioTime() {
      var audios = document.getElementById('audio')
      let long = parseInt(audios.duration)
      let min = parseInt((long / 60) % 60)
      let seconds = Math.ceil(long % 60)
      let formateSeconds = seconds > 59 ? 59 : seconds
      this.audioTime = `${min < 10 ? '0' + min : min}:${formateSeconds < 10 ? '0' + formateSeconds : formateSeconds}`
    },
    openChat(item) {
      axios({
        url: `${base_url}/proxy/qywx/jsdkConfig`,
        method: 'post',
        data: qs.stringify(
          // { url: 'http://wycl.autocnd.com:41080/ysc/assessManageDetail' },
          { url: location.href.split('?')[0], type: 'app' },
          { encode: false }
        ),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          satoken: getCookies('token')
        }
      }).then((res) => {
        console.log('jsdkConfig:', res)
        let jsdk = res.data.data
        wx.agentConfig({
          corpid: jsdk.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
          agentid: jsdk.agentid, // 必填，企业微信的应用id （e.g. 1000247）
          timestamp: jsdk.timestamp, // 必填，生成签名的时间戳
          nonceStr: jsdk.nonceStr, // 必填，生成签名的随机串
          signature: jsdk.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
          jsApiList: ['openExistedChatWithMsg'], //必填，传入需要使用的接口名称
          success: function(res) {
            console.log('agentConfig权限成功返回信息:', res)
            wx.invoke('openExistedChatWithMsg', {
              chatId: item.groupChatId
              // msg: {
              //   msgtype: "link",
              // }
            }, function(res) {
              if (res.err_msg == 'openExistedChatWithMsg:ok') {
              } else {
                Notify({
                  type: 'warning',
                  message: '您暂时无权限打开该群聊！'
                })
              }
            })
          },
          fail: function(res) {
            console.log('agentConfig权限失败返回信息:', res)
            if (res.errMsg.indexOf('function not exist') > -1) {
              alert('版本过低请升级')
            }
          }
        })
      })
    },
    getAttachmentList() {
      taskApi.getCarAttachmentList({
        carId: this.dataSource.carId
      }).then((res) => {
        if (res.code == 1) {
          this.attachmentList = res.data || []
        }
      })
    },
    // 下载文件
    downloadFile(data) {
      console.log(data)
      const formData = {
        attachId: encodeURI(data.attaId),
        attachName: data.attaName
      }
      var link = document.createElement('a')

      if (data.fileName && commJs.testPlat() == 1) {
        link.href = `${base_url}/download/${data.fileName}`
        link.download = data.fileName
        link.click()
        URL.revokeObjectURL(link.href)
        return false
      }
      // if (this.lock) {
      //   return false
      // }

      data.progress = data.progress | 0
      if (data.progress == 100 && commJs.testPlat() == 0) {
        Toast('该文件已下载，请勿重复下载！')
        return false
      } else {
        data.downTxt = '已下载'
      }
      this.lock = true
      const src = `${base_url}/proxy/cam/file/download?attachId=${formData.attachId}&attachName=${formData.attachName}`
      var link = document.createElement('a')
      data.fileName = formData.attachName
      link.href = src
      // link.download = res.data.data
      link.click()
      URL.revokeObjectURL(link.href)
    },
    lookFile(data) {
      this.pictureUrl.length = 0
      const formData = {
        attachId: encodeURI(data.attaId),
        attachName: data.attaName
      }
      this.pictureTitle = data.attaName
      this.pictureUrl.push(`${base_url}/proxy/cam/file/download?attachId=${formData.attachId}&attachName=${formData.attachName}`)
      this.showPicture = true
    },
    checkImgType(fileName){
      //用文件名name后缀判断文件类型，可用size属性判断文件大小不能超过500k ， 前端直接判断的好处，免去服务器的压力。
      if (!/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileName) ) {
        return  false;
      }else{
        return true;
      }
    },

    showUpdateMaintain(data) {
      Object.keys(this.updateMaintainData).forEach(key => delete this.updateMaintainData[key])
      this.updateMaintainVisible = true
      this.updateMaintainData.carId = data.id
      this.updateMaintainData.vinCode = data.vinCode
    },
    handleUpdateMaintainConfirm() {
      if (!this.updateMaintainData.maintainDate) {
        Notify({ type: 'danger', message: '请选择保养日期' })
        return
      }
      if (!this.updateMaintainData.maintainMileage) {
        Notify({ type: 'danger', message: '请输入保养里程' })
        return
      }
      carApi
        .carMaintainRecordAddNew({
          ...this.updateMaintainData
        })
        .then((res) => {
          if (res.code == 1) {
            Notify({ type: 'success', message: '新增成功' })
            // this.initData()
          } else {
            Notify({ type: 'danger', message: res.msg })
          }
        })
      this.updateMaintainVisible = false
    },
    handleConfirmDate(time) {
      this.updateMaintainData.maintainDate = this.formatDate(time)
      this.showPickerDate = false
    },
    formatDate(date) {
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      return year + '-' + month + '-' + day
    },
    queryCarInfoKhyy(carId, fixCenterId) {
      carApi.queryCarInfoKhyy({carId: carId, org_Id: fixCenterId}).then((res) => {
        if (res.code == 1) {
          this.carInfoKhyy = res.data[0]
        }
      })
    },
    toSeatInfo() {
      this.$router.push('/seatInformation')
    }
  }
}
</script>

<style lang="less" scoped>
.con_box {
  border: 1px solid #f3f3f3;
  width: 100%;
  background: #fff;
  margin-right: 0.2rem;
  box-sizing: content-box;
  position: relative;
  margin-top: 10px;
  overflow: auto;

  &::-webkit-scrollbar {
    // display: none;
  }

  &.relation_h {
    height: 350px;
    overflow: auto;

    .no_icon {
      margin-top: 65px;
    }
  }

  /deep/ .van-empty__image {
    width: 80px;
    height: 80px;
  }

  .com_title {
    position: relative;
    background: #dcdcdc;
    font-size: 0.32rem;
    padding: 0.2rem;

    &::before {
      content: '';
      background: #409eff;
      width: 4px;
      position: absolute;
      height: 20px;
      top: 7px;
      left: 0;
    }
  }
}

.followH {
  max-height: 502px;
  background: #fff;
  overflow: auto;
}

.flex {
  display: flex;
  align-items: center;
}

.registerDetail {
  background: #ebebeb;
  overflow: auto;
  height: calc(100vh - 144px);
  padding-bottom: 10px;

  //&::-webkit-scrollbar {
  //  // display: none;
  //}

  .detail_header {
    justify-content: space-between;
    margin: 0.2rem 0.2rem;
    border-radius: 5px;
    background: #fff;
    padding: 0.3rem;

    .detail_header_lt {
      .carNo {
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.2rem;
        align-items: center;

        .icon-right {
          margin-left: 0.2rem;
          color: #409eff;
        }

        .status {
          border: 1px solid #299a00;
          color: #299a00;
          padding: 0.05rem 0.2rem;
          text-align: center;
          font-size: 0.22rem;
          border-radius: 3px;
          margin-left: 0.2rem;
        }
      }

      .hank {
        font-size: 0.28rem;
        color: #666;

        .name {
          border-right: 2px solid #ccc;
          padding-right: 0.1rem;
          margin-right: 0.1rem;
        }
      }
    }

    .detail_header_rt {
      justify-content: flex-start;

      .txt {
        font-size: 0.28rem;
        color: #161616;
      }

      .icon-tel {
        font-size: 0.64rem;
        color: #35bc04;
        margin-right: 0.1rem;
        // position: relative;
        // top: -2px;
        // color: #fff;
        // background: #35bc04;
        // font-size: 0.32rem;
        // padding: 0.1rem;
        // border-radius: 50%;
        // margin-right: 0.1rem;
      }
    }
  }

  .formData {
    background: #fff;
  }
}

.labelList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.label_item {
  color: #299a00;
  border: 1px solid #299a00;
  border-radius: 4px;
  margin-right: 0.1rem;
  padding: 0.01rem 0.2rem;
  font-size: 0.2rem;
  margin-bottom: 0.1rem;

  &:last-child {
    margin-right: 0;
  }
}

.tabBarBox {
  margin-top: 0.2rem;
}

.tabCar {
  margin-top: 0.1rem;
}

// 卡券
.cardList {
  margin: 0.1rem 0.2rem 0.3rem 0.2rem;
  box-sizing: border-box;

  .cardItem {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 0.2rem;

    .box {
      overflow: hidden;

      .cardItem_lt {
        padding: 0.3rem 0.2rem;
        text-align: center;
        box-sizing: content-box;
        background: #ff58c2;
        color: #fff;
        overflow: hidden;
        height: 1.4rem;
        width: 30%;

        .price_icon {
          font-size: 0.3rem;
          color: #fff;
        }

        .price {
          color: #fff;

          .txt {
            font-size: 0.8rem;
            font-weight: bold;
          }

          .name {
            font-size: 0.28rem;
          }
        }
      }

      .cardItem_rt {
        padding: 0.3rem;
        border-bottom: 1px dashed #ccc;
        overflow: hidden;
        height: 1.4rem;
        width: 70%;

        .label_name {
          .label_txt {
            background: #ff3415;
            color: #fff;
            border-radius: 3px;
            text-align: center;
            padding: 0.07rem 0.2rem;
            font-size: 0.24rem;
            margin-right: 0.1rem;
          }

          .label_txt1 {
            color: #333;
            font-size: 0.28rem;
            font-weight: bold;
          }
        }

        .label_time {
          margin-top: 0.2rem;
          font-size: 0.26rem;
          color: #666;
        }
      }
    }

    .cardNo {
      padding: 0.2rem 0.3rem 0.2rem 0.2rem;
      font-size: 0.28rem;
      color: #333;
    }
  }
}

// 维修
.repairData {
  margin: 0.1rem 0.2rem 0.3rem 0.2rem;
  box-sizing: border-box;
  overflow: hidden;

  .repairItem {
    background: #fff;
    overflow: hidden;
    border-radius: 5px;
    padding: 0.2rem;
    margin-bottom: 0.2rem;

    .item_title {
      justify-content: space-between;
      padding: 0.1rem 0;
      border-bottom: 1px solid #f1f1f1;
      font-size: 0.28rem;
      margin-bottom: 0.3rem;
      position: relative;

      .rebox {
        font-size: 0.26rem;
        color: #666;
        margin-top: 0.1rem;

        .price {
          margin-right: 0.1rem;
        }
      }
    }

    .item_content {
      padding: 0 0.3rem;

      .item_contentbox {
        justify-content: space-between;
      }

      .item_data {
        font-size: 0.28rem;
        margin-bottom: 0.2rem;
        display: flex;

        .item_data_label {
          color: #333;
        }

        .item_data_value {
          color: #262626;

          &.txt {
            line-height: 0.32rem;
          }
        }
      }

      .item_data_width {
        width: 4.5rem;
      }
    }
  }
}

// 联系人
.contactbox {
  margin: 0.1rem 0.2rem 0.3rem 0.2rem;

  .contactItem {
    justify-content: space-between;
    background: #fff;
    padding: 0.2rem;
    margin-bottom: 0.1rem;
    border-radius: 4px;

    .contact_lt {
      .header {
        margin-bottom: 0.2rem;
        color: #333;

        .txt {
          font-size: 0.2rem;
          margin-right: 0.2rem;
          background: #409eff;
          padding: 0.1rem 0.2rem;
          border-radius: 4px;
          color: #fff;
        }

        .name {
          font-size: 0.28rem;
        }
      }

      .tel {
        font-size: 0.3rem;
        color: #333;
      }
    }

    .contact_rt {
      .icon-wx {
        font-size: 0.7rem;
        color: #409eff;
      }

      .icon-tel {
        font-size: 0.64rem;
        color: #35bc04;
        margin-right: 0.1rem;
        // font-size: 0.36rem;
        // background: #35bc04;
        // color: #fff;
        // text-align: center;
        // padding: 0.1rem;
        // border-radius: 50%;
        // position: relative;
        // top: -6px;
        // margin-right: 0.1rem;
      }
    }
  }
}

.addBtn {
  width: 100%;
  background: #fff;
  padding-bottom: 10px;

  .orderItem_filebox {
    background: linear-gradient(316deg, #3975c6 0%, #71a4ea 100%);
    cursor: pointer;

    width: 70%;
    margin: auto;
    text-align: center;
    font-size: 0.28rem;
    color: #fff;
    padding: 0.25rem 0rem;
    border-radius: 50px;
    margin-top: 20px;
  }
}

.relationTitle {
  padding-left: 0.2rem;
  border-left: 4px solid #409eff;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
  font-size: 0.26rem;
}

.orderList {
  margin: 0.2rem;
  overflow: hidden;
  padding-bottom: 1.5rem;
  height: 3rem;
  overflow: auto;

  .orderItem {
    padding: 0.3rem;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 0.3rem;

    .orderItem_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.3rem;
      padding-bottom: 0.2rem;
      border-bottom: 1px solid #f6f6f6;
      position: relative;

      .orderItem_lt {
        .carNo {
          font-size: 0.3rem;
          color: #333;
          margin-right: 0.2rem;
          font-weight: bold;
        }

        .txt {
          font-size: 0.26rem;
          color: #999;
          margin-top: 0.1rem;
        }

        .carStatus {
          background: #35bc04;
          color: #fff;
          border-radius: 4px;
          padding: 0.1rem 0.2rem;
          font-size: 0.24rem;
          text-align: center;
          width: 1rem;
          margin-top: 0.1rem;
        }
      }

      .orderItem_rt {
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: flex-start;
        color: #666;
        font-size: 0.28rem;

        .txt {
          font-size: 0.28rem;
          color: #161616;
        }

        .icon-tel {
          font-size: 0.64rem;
          color: #35bc04;
          margin-right: 0.1rem;
          // color: #fff;
          // background: #35bc04;
          // font-size: 0.32rem;
          // padding: 0.1rem;
          // border-radius: 50%;
          // margin-right: 0.2rem;
        }

        .icon-wx {
          color: #409eff;
          font-size: 0.65rem;
        }
      }
    }

    .orderItem_content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;

      .orderItem_data {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 50%;
        margin-bottom: 0.2rem;
        font-size: 0.28rem;
        box-sizing: content-box;
        color: #333;

        .order_label {
          font-size: 0.28rem;
          color: #333;
          width: 1.8rem;
        }

        .txt {
          font-size: 0.28rem;
          color: #666;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &.time {
          width: 100%;
        }
      }
    }

    .orderItem_file {
      background: #ebebeb;
      color: #333;
      border-radius: 5px;
      padding: 0.2rem 0;
      text-align: center;
      width: 100%;
      font-size: 0.28rem;
      display: flex;
      align-items: center;
      justify-content: center;

      .file_item {
        width: 33.33%;
        border-right: 1px solid #ccc;

        .icon-tel {
          font-size: 0.34rem;
          color: #35bc04;
          margin-right: 0.1rem;
        }

        .icon-mileage {
          font-size: 0.4rem;
          color: #409eff;
          margin-right: 0.1rem;
          position: relative;
          top: 0.04rem;
        }

        .icon-gw {
          font-size: 0.4rem;
          color: #409eff;
          margin-right: 0.1rem;
          position: relative;
          top: 0.04rem;
        }

        &:last-child {
          border: none;
        }
      }
    }
  }
}

// 跟进信息
.followInfo {
  padding: 0.2rem;
  background: #fff;
  height: 7rem;
  overflow: auto;

  .followInfo_item {
    margin-bottom: 0.2rem;
    position: relative;

    .followInfo_lt {
      width: 20%;

      .followInfo_time {
        font-size: 0.26rem;
        color: #999;
        position: absolute;
        top: 3px;
        left: -21px;
        width: 100px;
        text-align: center;
      }

      &::before {
        content: '';
        height: 130px;
        width: 1px;
        background: #ccc;
        position: absolute;
        top: 30px;
        left: 0.6rem;
      }

      .icon-circle {
        color: #ccc;
        z-index: 2;
        position: absolute;
        top: 40px;
        left: 0.42rem;
        background: #fff;
      }
    }

    .followInfo_rt {
      background: #f1f1f1;
      width: 80%;
      padding: 0.3rem 0 0.3rem 0.3rem;
      border-radius: 4px;

      .followInfo_num {
        font-size: 0.28rem;
        color: #333;
        margin-bottom: 0.1rem;
        margin-bottom: 0.2rem;
        font-weight: bold;
      }

      .followInfo_data {
        font-size: 0.26rem;
        color: #666;
        margin-bottom: 0.1rem;

        .followInfo_img {
          width: 0.8rem;
          height: 0.8rem;
          margin-right: 0.1rem;
        }
      }
    }
  }
}

.noContent {
  margin-top: 2rem;
}

.martop {
  margin-top: 0rem !important;
}

.pcCarInfo {
  font-size: 0.28rem;
  padding: 0.2rem;

  .carInfobox {
    .carInfobox_con {
      display: flex;
      flex-wrap: wrap;

      .carInfobox_data {
        margin-bottom: 0.25rem;
        width: 33%;

        .carInfobox_data_label {
          color: #999;
          margin-bottom: 0.1rem;
        }

        .txt {
          color: #666;
        }
      }
    }
  }
}

.pc_contact {
  padding: 0.2rem;

  .contactItem {
    justify-content: space-between;
    background: #fff;
    padding: 0.2rem;
    margin-bottom: 0.1rem;
    border-radius: 4px;
    border: 1px dashed #409eff;

    .contact_lt {
      .header {
        margin-bottom: 0.2rem;
        color: #333;

        .txt {
          font-size: 0.2rem;
          margin-right: 0.2rem;
          background: #409eff;
          padding: 0.1rem 0.2rem;
          border-radius: 4px;
          color: #fff;
        }

        .name {
          font-size: 0.28rem;
        }
      }

      .tel {
        font-size: 0.3rem;
        color: #333;
      }
    }

    .contact_rt {
      .icon-wx {
        font-size: 0.7rem;
        color: #409eff;
      }

      .icon-tel {
        font-size: 0.64rem;
        color: #35bc04;
        margin-right: 0.1rem;
        // font-size: 0.36rem;
        // background: #35bc04;
        // color: #fff;
        // text-align: center;
        // padding: 0.1rem;
        // border-radius: 50%;
        // position: relative;
        // top: -6px;
        // margin-right: 0.1rem;
      }
    }
  }
}

.pc_taskDetail {
  font-size: 0.28rem;
  padding: 0.2rem;

  .carInfobox {
    .carInfobox_con {
      display: flex;
      flex-wrap: wrap;

      .carInfobox_data {
        margin-bottom: 0.25rem;
        width: 20%;

        .carInfobox_data_label {
          color: #999;
          margin-bottom: 0.1rem;
        }

        .txt {
          color: #333;
        }
      }
    }
  }
}

.taskDetail_box {
  width: 100%;
  min-height: 350px;
  background: #fff;
  // overflow: hidden;
  margin-right: 0.2rem;
  box-sizing: content-box;

  .com_title {
    position: relative;
    background: #dcdcdc;
    font-size: 0.32rem;
    padding: 0.2rem;

    &::before {
      content: '';
      background: #409eff;
      width: 4px;
      position: absolute;
      height: 20px;
      top: 7px;
      left: 0;
    }
  }
}

.long_txt {
  display: -webkit-box;
  /* 将容器以弹性盒子形式布局 */
  -webkit-line-clamp: 2;
  /* 限制文本显示为两行 */
  -webkit-box-orient: vertical;
  /* 将弹性盒子的主轴方向设置为垂直方向 */
  overflow: hidden;
  /* 隐藏容器中超出部分的内容 */
  text-overflow: ellipsis;
  /* 超出容器范围的文本显示省略号 */
}

.detailbox_item {
  margin-top: 10px;
  background: #fff;
  padding: 10px;

  // position: relative;
  .detailbox_item_title {
    font-size: 16px;
    font-weight: 700;
    color: #1d2129;
    margin-bottom: 14px;
    background: url('~@/assets/images/ttbg.png') no-repeat left bottom #fff;
    background-size: 32px 6px;
    // position: absolute;
    // top: 0;
    // left: 0;
    // width: 100%;
  }

  .detail_content {
    background: #f9fafc;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #fbfcfe;
    padding: 17px 16px;

    .task_item_type {
      margin-bottom: 20px;

      .task_item_tt {
        font-weight: 800;
        font-size: 12px;
        color: #86909c;
        margin-bottom: 10px;
      }

      .task_item_val {
        font-weight: 700;
        font-size: 16px;
        color: #333333;
      }

      .task_item_desc {
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        background: #f2f3f5;
        padding: 5px 6px;
      }
    }

    .task_itembox {
      overflow: hidden;

      .task_itembox_con {
        width: 50%;
        margin-bottom: 15px;
        float: left;

        .task_label {
          font-weight: 400;
          font-size: 12px;
          color: #86909c;
          margin-bottom: 5px;
        }

        .task_value {
          font-weight: 700;
          font-size: 16px;
          color: #2f2f2f;
        }
      }
    }
  }

  .relat_tab {
    display: flex;
    margin-bottom: 10px;

    .relat_tab_item {
      font-weight: 500;
      font-size: 12px;
      color: #333333;
      border-radius: 4px;
      padding: 5px 8px;
      background: #f7f7f7;
      margin-right: 5px;

      &.active {
        color: #165dff;
        background: #d8e3ff;
      }
    }
  }

  .relat_content {
    .relat_item {
      background: #ffffff;
      box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.09);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #fbfcfe;
      margin-bottom: 20px;
      padding: 10px 9px 12px;
      cursor: pointer;

      .relat_content_header {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        .name {
          font-weight: bold;
          font-size: 14px;
          color: #333333;
        }

        .status {
          font-weight: 700;
          font-size: 12px;
          color: #00b42a;
          background: #e8ffea;
          border-radius: 2px 2px 2px 2px;
          padding: 5px 8px;

          &.status2 {
            background: rgba(255, 48, 33, 0.2);
            color: #ff1100;
          }
        }
      }

      .relat_carInfo {
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        background: #f2f3f5;
        padding: 5px 6px;
        margin-bottom: 12px;
      }

      .relat_user {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        font-size: 12px;
        color: #165dff;
        background: #e8f5ff;
        border-radius: 2px 2px 2px 2px;
        padding: 5px 6px;
      }
    }
  }

  .followInfo_content {
    .followInfo_item {
      padding: 10px 0px 10px 20px;

      .followInfo_top {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .followInfo_circle {
          background: #f2f2f2;
          border-radius: 50%;
          width: 9px;
          height: 9px;
          margin-right: 10px;
        }

        .followInfo_name {
          font-weight: 700;
          font-size: 14px;
          color: #86909c;
        }
      }

      .followInfo_box {
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

        .followInfo_linebox {
          width: 1px;
          position: relative;
          -ms-flex-item-align: stretch;
          align-self: stretch;
          background: #f2f2f2;
          margin: 0 10px 0 4px;
        }

        .followInfo_val {
          width: 100%;
          padding: 12px 16px;
          background: #f9fafc;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #fbfcfe;
          flex: 1;

          .followInfo_val_item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

            .item_label {
              font-weight: 400;
              font-size: 14px;
              color: #86909c;
            }

            .item_val {
              font-weight: 700;
              font-size: 14px;
              color: #2f2f2f;
            }
          }

          .followInfo_val_item2 {
            .item_label {
              font-weight: 400;
              font-size: 14px;
              color: #86909c;
              margin-bottom: 10px;
            }

            .item_val {
              font-weight: 300;
              font-size: 14px;
              color: #86909c;
              background: #f2f3f5;
              padding: 5px 6px;
            }
          }
        }
      }

      &.active {
        .followInfo_top {
          .followInfo_circle {
            background: #165dff;
          }

          .followInfo_name {
            color: #165dff;
          }
        }

        .followInfo_box {
          .followInfo_linebox {
            background: #165dff;
          }
        }
      }
    }
  }

  .carInfo_content {
    background: #f9fafc;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #fbfcfe;
    padding: 7px 16px;

    .carInfo_item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      .item_label {
        font-weight: 400;
        font-size: 12px;
        color: #86909c;
      }

      .item_val {
        font-weight: 700;
        font-size: 12px;
        color: #333333;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .contact_content {
    .contact_item {
      box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.02);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #f4f4f6;
      margin-bottom: 3px;
      padding: 12px 10px 12px 10px;

      .contact_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 14px;

        .item_label {
          font-weight: 700;
          font-size: 12px;
          color: #165dff;
          background: #e8f5ff;
          border-radius: 2px 2px 2px 2px;
          padding: 4px 5px;
        }

        .item_icon {
          display: flex;

          .item_img {
            width: 29px;
            height: 29px;
            margin-right: 17px;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }

      .contact_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 4px;

        .item_name {
          display: flex;

          .txt1 {
            font-weight: 400;
            font-size: 12px;
            color: #86909c;
          }

          .txt2 {
            font-weight: 700;
            font-size: 12px;
            color: #2f2f2f;
          }
        }

        .item_icon {
          display: flex;
          margin-left: 5px;

          .item_img {
            width: 29px;
            height: 29px;
            margin-right: 5px;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }

  .repair_content {
    .repair_list {
      .repair_item {
        box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #f4f4f6;
        padding: 10px;
        margin-bottom: 10px;

        .item_top {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #f7f5f5;
          padding-bottom: 10px;

          .item_num {
            display: flex;
            align-items: center;

            .item_icon {
              width: 11px;
              display: block;
              height: 11px;
              margin-right: 5px;
            }

            .item_name {
              font-weight: 800;
              font-size: 14px;
              color: #333333;
            }
          }

          .item_btn {
            font-weight: 400;
            font-size: 12px;
            color: #165dff;
          }
        }

        .item_bottom {
          padding-top: 8px;

          .item_box {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            align-items: center;
            width: 100%;

            .item_lt {
              display: flex;

              .item_lable {
                font-weight: 400;
                font-size: 12px;
                color: #86909c;
              }

              .item_val {
                font-weight: 400;
                font-size: 12px;
                color: #2f2f2f;
              }
            }

            .item_rt {
              background: #e8f5ff;
              border-radius: 2px 2px 2px 2px;
              font-weight: 700;
              font-size: 10px;
              color: #165dff;
              padding: 3px 5px;
              display: flex;

              .item_lable {
              }

              .item_val {
              }
            }

            .item_rt2 {
              display: flex;

              .item_lable {
                font-weight: 400;
                font-size: 12px;
                color: #86909c;
              }

              .item_val {
                font-weight: 400;
                font-size: 12px;
                color: #2f2f2f;
              }
            }
          }

          .item_box2 {
            .item_lt {
              display: flex;

              /* 使用弹性盒模型 */

              .item_lable {
                font-weight: 400;
                font-size: 12px;
                color: #86909c;
                width: 60px;
              }

              .item_val {
                font-weight: 400;
                font-size: 12px;
                color: #2f2f2f;
                width: calc(100% - 60px);
              }
            }
          }
        }
      }
    }
  }

  .repair_height {
    height: 455px;
    overflow: auto;
  }

  .card_content {
    // min-height: calc(100vh - 150px);
    .card_list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .card_item {
      flex: 1 1 50%;
      border-radius: 4px;
      position: relative;
      height: 86px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      background: #fff;

      .item_lt {
        width: 134px;
        height: 86px;
        font-weight: 700;
        font-size: 36px;
        line-height: 86px;
        color: #ffffff;
        background: url('~@/assets/images/card_bg.png') no-repeat center;
        background-size: 134px 86px;
        text-align: center;
        margin-right: 10px;
        border-radius: 0px 12px 12px 0px;
      }

      .item_rt {
        padding-top: 10px;

        .item_name {
          margin-bottom: 8px;
          font-weight: 700;
          font-size: 14px;
          color: #2f2f2f;
        }

        .item_number {
          font-weight: 700;
          font-size: 12px;
          color: #2f2f2f;
          margin-bottom: 8px;
        }

        .item_time {
          font-weight: 400;
          font-size: 12px;
          color: #86909c;
          display: flex;

          .txt1 {
            margin-right: 10px;
          }
        }
      }

      .item_type {
        font-weight: 700;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        padding: 5px 10px;
        border-radius: 0px 4px 0px 4px;
        background: #ff2b2b;
        position: absolute;
        top: 0px;
        right: 0;
      }
    }
  }

  .task {
    .taskList {

      display: -webkit-box;
      width: 100%;
      overflow-x: auto;
      font-size: 16px;
      padding-bottom: 10px;


      .item {
        display: grid;
        place-items: center;
        width: auto;
        height: auto;
        line-height: 25px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 12px;
        text-align: center;
        border: 1px solid rgba(57, 117, 198, 1);
        margin: 0 10px;
        padding: 5px 10px;

        .name {
          left: 14px;
          top: 17px;
        }

        .time {
          left: 36px;
          top: 37px;
          height: 24px;
          line-height: 23px;
          color: rgba(22, 132, 252, 1);
          font-size: 12px;
          text-align: center;
        }
      }
    }

    //::-webkit-scrollbar {
    //  display: none;
    //}
  }


}

.no_icon {
  padding: 25px;

  .no_icon_img {
    width: 70px;
    display: block;
    margin: auto;
  }

  .no_icon_txt {
    font-weight: 400;
    font-size: 14px;
    color: #86909c;
    text-align: center;
    margin-top: 10px;
  }
}

.mb80 {
  margin-bottom: 80px;
}

.mt0 {
  margin-top: 0px;
}

.mt175 {
  margin-top: 175px;
}

.h250 {
  height: 250px;
  overflow: auto;
}

.h500 {
  height: 502px;
  overflow: auto;
}

.h170 {
  height: 170px;
  overflow: auto;
}

.h100 {
  height: 100px;
  overflow: auto;
}

.mt100 {
  margin-top: 100px;
}

.h600 {
  height: 600px;
  overflow: auto;
}

.rowbox {
  display: flex;
  justify-content: space-around;
}

.h395 {
  max-height: 395px;
  overflow: auto;
}

.groupInfo {
  .groupInfo_item {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 20px;

    .groupInfo_icon {
      height: 50px;
      width: 50px;
      background: rgba(255, 48, 33, 0.6);
      border-radius: 4px;
      text-align: center;
      line-height: 50px;
      font-size: 24px;
      color: #fff;
      margin-right: 10px;
    }

    .groupInfo_detail {
      font-size: 12px;
      color: #999;

      .groupInfo_name {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 2px;
        margin-bottom: 6px;
        color: #333;
        width: 240px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .groupInfo_txt {
        margin-bottom: 6px;

        .groupInfo_span {
          margin-right: 5px;
        }

        .groupInfo_span1 {
          margin-left: 5px;
        }
      }

      .groupInfo_txt1 {
      }
    }

    .groupInfo_btn {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 14px;
      color: #165dff;
      cursor: pointer;

      .to_chat {
        text-align: center;
        margin-top: 9px;
      }
    }
  }
}

.contact_list {
  padding: 0.5rem 0.2rem 0 0.2rem;

  .contact_item {
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .contact_lt {
    font-size: 0.28rem;
    color: #23ec1c;

    .contact_header {
      width: 30px;
      height: 30px;
      display: block;
      border-radius: 5px;
      margin-right: 5px;
    }

    .contact_name {
      font-size: 0.28rem;
      color: #333;
      margin-left: 5px;
      flex: 1;
    }

    .contact_com {
      color: #f65e07;
      font-size: 0.28rem;
    }

    .contact_com_wx {
      color: #23ec1c;
      font-size: 0.28rem;
      width: 50px;
      text-align: center;
    }
  }

  .contact_btn {
    background: #409eff;
    color: #fff;
    padding: 5px 0;
    text-align: center;
    border-radius: 3px;
    font-size: 0.28rem;
    width: 60px;
  }
}

.h600 {
  max-height: 300px;
  overflow: auto;
}

.groupInfo_content {
  //padding-bottom: 20px;
  //margin-bottom: 30px;
  overflow: auto;
}

.userList_content {
  overflow: auto;

  .userList_item:last-child {
    margin-bottom: 0;
  }
}

.pt80 {
  padding-top: 80px;
}

.membot {
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.contact_type {
  font-size: 14px;
  color: #999;
  margin-left: 5px;
}

.h150 {
  height: 150px;
}

.h55 {
  height: 55px;
}

.detailbox_item_search {
  font-size: 14px;

  .followParams {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .followParams_item {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .followParams_label {
      }

      .followParams_select {
        border: 1px solid #165dff;
        border-radius: 3px;
        padding: 5px 10px 5px 5px;
        margin-left: 10px;
        font-size: 12px;
        display: flex;
        align-items: center;

        .followParams_select_txt {
          max-width: 130px;
          flex-shrink: 0;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }

        .icon-more {
          font-size: 14px;
          margin-left: 10px;
        }
      }

      .followParams_icon {
        color: #165dff;

        .iconfont {
          font-size: 20px;
        }
      }
    }
  }
}

.videoClass {
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 10px;
  font-size: 12px;
  color: #999999;
}

.borderClass {
  border: 1px solid #c3c3c3;
  padding: 10px;
  margin-top: 5px;
}

.icon-label{
  position: fixed;
  right: 30px;
  bottom: 70px;
}

.phoneNumberIcon {
  height: 55px;
  width: 55px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;


}
.carSearchIcon {
  height: 55px;
  width: 55px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.calldialogClass {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  line-height: 50px;
}

.callButtonClass {
  width: 70px;
  height: 30px;
  border-radius: 5px;
  line-height: 30px;
  text-align: center;
  background-color: #1684fc;
  color: #fff;
  margin-left: 10px;
}

.input-placeholder {
  // font-size: 30px;
}

/deep/ .van-button__text {
  font-size: 20px !important;
}


.tableData {
  margin-top: 10px;
  //margin: 0 16px;
  // height: 500px;
  border-collapse: collapse;
  text-align: center;
  // height: auto; /* 自动计算高度 */
  border-radius: 5px;
  overflow-x: hidden;

  .tableDatabox {
    overflow-x: auto;
    height: 305px;
  }

  table {
    //min-width: 800px;
    font-size: 0.24rem;
    border: none;
    width: 100%;
  }

  .last_item td {
    font-weight: bold;
  }

  .tab_item {
    background: #f1f1f1;
  }

  tr > td:first-child {
    //position: sticky;
    //left: 0;
    //z-index: 1;
    //background: #3975c6;

    //color: #fff;
  }

  tr > th:first-child {
    //position: sticky;
    //left: 0;
    //z-index: 1;
    background: #3975c6;
    //color: #fff;
  }

  tr {
    th {
      position: sticky; /* 将表头固定在位置 */
      top: 0; /* 与容器顶部对齐 */
      font-size: 12px;
      border: 1px solid #fff;
      padding: 0.2rem 0;
      background: #3975c6;
      color: #fff;
      font-weight: bold;
    }

    td {
      padding: 0.1rem 0;
      border: 1px solid #f1f1f1;
      color: #333;
      font-size: 12px;
    }
  }
}

</style>
